iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

三十天成為D3.js v7 好手系列 第 4

Day4- D3選取器:Selection

  • 分享至 

  • xImage
  •  

本篇大綱:selection 重點概述、selection 提供的 API、selection 調整元素樣式、selection 增減元素

上一章講完 SVG 後,接下來就要進到 D3 的重頭戲啦~由於D3是操作DOM 的節點去綁定數據資料,因此 D3 最重要的兩點便是:

1. selection 選定節點
2. data binding 綁定資料

這一章我們就先來說說第一點:Selection 選定節點吧!

Selection 重點概述

D3 的 selection 跟JQ一樣,都是使用 css 選擇器去選 DOM 上的元素 (element),因此使用過 JQ 的人,看到 D3 的 selection 應該會有種親切熟悉感~

使用 d3.selection 時,它會返還一個 selection 的物件實體 (或是如果畫面上沒有元素的話,會建立一個新的實體),之後就可以使用這個實體擁有的函式去調整它的子集合。

D3 selection 的運作方式是

  1. 指定好 Dom 樹位置並選取特定元素
  2. 將資料綁訂到指定元素
  3. 可以去改變此元素的樣式 (顏色、尺寸、位置等)
  4. 最後透過 svg 去渲染出圖表

selection API

D3 官方文件提供多種方法去選取元素 (element)
https://ithelp.ithome.com.tw/upload/images/20210916/201349306nWd8BMhsv.jpg

在看官方文件時,你會發現不少 API 都被劃分在 d3.selection 分類之下。其實我一開始看不太明白,而且不清楚官方文件提到的 selection 是什麼,後來靠著 Kuro 大大的神救援才弄清楚~我們使用 d3.select 的 API 時,它會回傳一個集合物件(這邊通稱為 selection)。這個集合內可能有元素,也可能沒有元素 (是一個空集合)。而這個集合物件之後在資料綁定的過程,會透過 enter/exit 來決定實際上的節點數量,因此下一章的 Data-Binding API 們也是歸類在 selection 這個分類下。

弄懂上面所說的之後,現在就來介紹一般最常用的兩種 API 吧

  • d3.select:選取符合欲選元素的第一個元素
  • d3.selectAll:選取符合欲選元素的所有元素

因為 d3.select 只會選擇第一個符合選取器的元素,所以也只有第一個元素會被調整 (如下)

<div class="box1">
  <p>select 1</p>
  <p>select 2</p>
  <p>select 3</p>
  <p>select 4</p>
</div>

// JS
d3.select('.box1 p').style('color', 'red');

https://ithelp.ithome.com.tw/upload/images/20210916/20134930uxoiJBAlfs.jpg

所以如果想選到所有元素並一起調整的話,就要用 d3.selectAll

<div class="box2">
  <p>selectAll 1</p>
  <p>selectAll 2</p>
  <p>selectAll 3</p>
  <p>selectAll 4</p>
</div>

// JS
d3.selectAll('.box2 p').style('color', 'red');

https://ithelp.ithome.com.tw/upload/images/20210916/201349309AMXSFiv4M.jpg

選到想要的元素後,就可以進行接下來的操作啦~ D3的官方API 列出 d3.selection 能對元素的所有調整,有興趣的人可以點連結進去看~
https://ithelp.ithome.com.tw/upload/images/20210916/201349308Lc1cuiEwp.jpg

但我這邊由於篇幅的關係,只講解最常用到的部分:

  1. 對元素的樣式進行調整
  2. 增減元素

對元素的樣式進行調整

選定元素之後,我們可以透過 d3.selection 提供的一些方法,來對選到的元素進行樣式、屬性的調整

  • selection.style() 調整樣式
  • selection.attr() 調整標籤屬性值

範例如下

<svg class="svg1" width="500" height="300">
  <circle></circle>
</svg>

//JS 
d3.select('.svg1 circle')
      .attr("r", 10)
      .attr("fill", "blue")
      .attr("cx", 50)
      .attr("cy", 50);

https://ithelp.ithome.com.tw/upload/images/20210916/20134930N8KZkOUAlr.jpg

如果想改變藍點點的位置,可以用 .attr (transform)來調整

//JS 
d3.select('.svg1 circle')
      .attr("r", 10)
      .attr("fill", "blue")
      .attr("cx", 50)
      .attr("cy", 50);
			.attr("transform", "translate(40,40)");

https://ithelp.ithome.com.tw/upload/images/20210916/20134930ERgZ7b7GtH.jpg

增減元素

除了修改樣式之外,另一個更棒的是我們能夠隨意增減元素。元素的增減也會牽涉到之後的資料綁定~現在就來看看幾個常用的API吧

  • selection.append ( ) 向後加入元素
  • selection.remove ( ) 移除元素
  • selction.merge ( ) 合併元素

範例:原本畫面上只有 4 個 p 元素,現在用 d3.selection.append 的 API 加上一個 p元素

<div class="append">
  <p>a</p>
  <p>b</p>
  <p>c</p>
  <p>d</p>
</div>

// JS
d3.select('.append')
  .append('p')
  .text('e');

以上就是 d3.Selection 如何選取元素並調整元素樣式、增減元素,但 d3.selection能做到的遠不止這些。除了調整元素之外,d3.selectio 還能「綁定資料」、「處理事件」跟「呼叫並使用方法」等不同功能的 API (下圖參見官方資料)
https://ithelp.ithome.com.tw/upload/images/20210916/20134930EV9GPKsn7n.jpg

https://ithelp.ithome.com.tw/upload/images/20210916/201349306RJ3pmaobj.jpg

下一章就會進到資料綁定的部分~敬請期待!

Github Page 圖表與 Github 程式碼

最後一樣附上本章的程式碼與圖表 GithubGithub Page,需要的人請自行取用~


上一篇
Day3-認識 SVG
下一篇
Day5-D3 資料綁定 Data Binding:data( ) 跟 datum( )
系列文
三十天成為D3.js v7 好手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言